code:

            <div>
                <div class="frame">
                    <section class="main_B">
                        <div class="bg"></div>
                        <div class="bg bg2"></div>
                        <div class="bg bg3"></div>
                        <div class="content_B"><h1>diagonal sliding of bars</h1></div>
                    </section>
                </div>
                <style>
                    .frame{height: 50vh; width: 90vw; margin-left: 5vw;}
                    .main_B{height: 20vw; width: 40vw; margin-left: 10vw;}
                    .bg{animation:slide 13s ease-in-out infinite alternate;  background-image: linear-gradient(-60deg, seagreen 50%, skyblue 50%); 
                        bottom:0; left:-5%; opacity:.5; position: absolute; right:-5%; top:15vw; z-index:-1; } 
                    .bg2 {animation-direction:alternate-reverse; animation-duration:14s;}
                    .bg3 {animation-duration:15s;}
                    .content_B {background-color:seagreen;border-radius: 25vw; box-shadow:0 0 1vw rgba(0,0,0,.25); box-sizing:border-box;left:50%; 
                        padding:1vmin; position:absolute; text-align:center;top: 30%; 
                        transform:translate(-50%, -50%);}
                    @keyframes slide {
                        0% {transform:translateX(-25%);}
                        100% {transform:translateX(25%);}
                    }    
                </style>
            </div>